<template>
  <view class="wapper">
    <view class="submit-bar-view" style="display: flex; justify-content: center">
      <view class="submit-btn-view">
        <button class="submit-btn" @click="onStore" v-if="isStore">
          <u-icon name="/static/goods-detail/dp.png" size="32"></u-icon>
          <view class="submit-text">店铺</view>
        </button>
        <button class="submit-btn" @click="onFollow" v-if="isFollow">
          <u-icon v-if="!canFollow" name="/static/scsp.png" size="32"></u-icon>
          <u-icon v-else class="t-icon" name="/static/scsp_xz.png" size="32"></u-icon>
          <view v-if="!canFollow" class="submit-text">收藏</view>
          <view v-else class="submit-text">取消</view>
        </button>
        <button class="submit-btn" open-type="share" v-if="isShare">
          <u-icon name="/static/sxyh.png" size="32"></u-icon>
          <view class="submit-text">分享</view>
        </button>
        <view class="submit-btn" v-if="isContect" @click="onContact">
          <u-icon name="/static/kf.png" size="32"></u-icon>
          <view class="submit-text">联系</view>
        </view>
      </view>
      <!-- <view class="submit-add-cart" style="background-color: #67C23A;" @click="onMessage">详情咨询</view> -->
      <view class="submit-add-cart" v-if="isAdd" @click="onAddCart">加入购物车</view>
      <view class="submit-pay" v-if="isPay" @click="onPayment">立即购买</view>
      <slot name="right"> </slot>
    </view>
  </view>
</template>

<script>
/**
 * submit-bar 购物车底部组件
 * @property {Boolean} isWeiXin 是否为小程序使用（分享或客服）
 * @property {Boolean} isMsg 是否显示客服
 * @property {Boolean} isShare 是否显示分享
 * @property {Boolean} isCart 是否显示购物车
 * @property {Boolean} isAdd 是否显示加入购物车
 * @property {Boolean} isPay 是否显示购买
 */
export default {
  name: 'submit-bar',
  props: {
    isStore: {
      type: Boolean,
      default: false
    },
    isFollow: {
      type: Boolean,
      default: true
    },
    isContect: {
      type: Boolean,
      default: false
    },
    isAdd: {
      type: Boolean,
      default: true
    },
    isPay: {
      type: Boolean,
      default: true
    },
    isShare: {
      type: Boolean,
      default: false
    },
    canFollow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },

  methods: {
    onMessage() {
      this.$emit('message', true)
    },
    onContact() {
      this.$emit('contact', true)
    },
    onStore() {
      this.$emit('store', true)
    },
    onFollow() {
      this.$emit('follow', true)
    },
    onShare() {
      this.$emit('share', true)
    },
    onCart() {
      this.$emit('cart', true)
    },
    onAddCart() {
      if (!uni.getStorageSync('userInfo')) {
        this.$utils.goToLogin()
        return
      }
      this.$emit('add', true)
    },
    onPayment() {
      if (!uni.getStorageSync('userInfo')) {
        this.$utils.goToLogin()
        return
      }
      this.$emit('pay', true)
    }
  }
}
</script>

<style scoped>
button {
  padding: 0;
  line-height: 1.4;
}

button::after {
  border: none;
}
.wapper {
  position: fixed;
  bottom: 0;
  background: #ffffff;
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
}

.submit-bar-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 96rpx;
  box-shadow: 0rpx -1rpx 10rpx 0rpx rgba(153, 153, 153, 0.1);
}

.submit-btn-view {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 20rpx;
  padding-right: 30rpx;
  justify-content: flex-start;
  flex: 1;
}

.submit-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  margin: 0;
  margin-right: 30rpx;
  /* padding: 0px 20rpx; */
}

.submit-text {
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}

.submit-add-cart {
  width: 200rpx;
  height: 70rpx;
  background: #ff6f10;
  border-radius: 35rpx;
  line-height: 70rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  margin-right: 20rpx;
  margin-left: 20rpx;
}

.submit-pay {
  width: 200rpx;
  height: 70rpx;
  background: #10a28f;
  border-radius: 35rpx;
  line-height: 70rpx;
  text-align: center;
  background: #10a28f;
  font-size: 28rpx;
  font-weight: 400;
  color: #ffffff;
  margin-right: 20rpx;
}
</style>
